<template>
  <div style="height: 100%">
    <navbar>
        <template #title>
          <form action="/">
            <van-search
                    v-model="keyWord"
                    :placeholder="$t('button_search')"
                    input-align="left"
                    @search="onSearch"
            />
          </form>
        </template>
    </navbar>
    <div class="content-container">
      <!--tab-->
      <div class="catalog-container">
        <tabs :tabs="catalogList" @selectType="changeType"></tabs>
      </div>
      <div class="list-container">
        <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
          <van-list
          v-model="isLoading"
          :finished="finished"
          :finished-text="(finished&&total>0) ? $t('no_more') : ''"
          loading-text="loading"
          @load="getSearchContent"
          style="padding-bottom: 56px;"
          >
            <search-item  v-for="(item,i) in searchContent" :key="i" :item="item" :wcId="Number(votId)" :searchValue="keyWord"/>
          </van-list>
        </van-pull-refresh>
      </div>
      <!--暂无数据-->
      <div v-if="!isLoading && total <= 0" style="height: 100%">
        <div class="box-table" style="width:100%;height:100%;">
          <div class="box-table-cell" style="text-align: center;">
            <div class="no-data">
              <img src="../../../../static/images/no-data.png" alt=""/>
              <p class="color999">{{ $t("no_data") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <common-loading :isLoading="isLoading"></common-loading>
  </div>
</template>

<script>
import tabs from '@/repeatComponents/tab/Tab';
import searchItem from '@/components/circle/search/SearchItem';
import {Search, Toast} from 'vant';
export default {
    name: 'SearchList',
    data() {
        return {
            votId: this.$route.query.votId,
            keyWord: this.$route.query.keyWord,
            pageNo: 1,
            searchValue: '',
            type: 'ALL',
            searchContent: [],
            totalPage: 0,
            catalogList: [
                {name: this.$t('circle258'),
                 type: 'ALL',
                 sum: 0},
                {name: this.$t('circle259'),
                 type: 'TOPIC',
                 sum: 0},
                {name: this.$t('circle260'),
                 type: 'KNOWLEDGE',
                 sum: 0},
                {name: this.$t('circle261'),
                 type: 'ATLAS',
                 sum: 0},
                {name: this.$t('circle262'),
                 type: 'ACTIVITY',
                 sum: 0},
                {name: this.$t('circle253'),
                 type: 'VOTE',
                 sum: 0},
                {name: this.$t('circle263'),
                 type: 'MEMBER',
                 sum: 0}
            ],
            isTop: false,
            isLoading: false,
            onFetching: false,
            total: 1,
            finished: false,
            isRefresh: false
        };
    },
    components: {
        tabs,
        searchItem,
        [Search.name]: Search,
        vanToast: Toast
    },
    mounted() {
        // this.getSearchContent('refresh');
    },
    methods: {
        //获取搜索数据
        getSearchContent(option) {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/work-circle/search/${this.votId}`,
                params: {
                    sortType: this.type || 'ALL',
                    sortField: 'date',
                    sortorder: 'DESC',
                    word: this.keyWord,
                    pageNo: this.pageNo
                }
            }).then(res => {
                if (option === 'refresh') {
                    this.searchContent = res.data.page.results;
                } else {
                    this.searchContent = [...this.searchContent, ...res.data.page.results];
                }
                this.checkTabSum(res.data.searchCount);
                this.total = res.data.page.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.searchContent.length >= this.total) {
                    this.finished = true;
                }
            }).catch(res => {
                Toast({message: res.response.data.errMsg, forbidClick: true});
                this.isLoading = false;
                this.onFetching = false;
                this.checkTabSum(null);
                this.totalPage = 0;
                this.total = 0;
                this.$router.go(-1);
            });
        },
        //标题数量控制
        checkTabSum(list) {
            if (list) {
                this.catalogList[0].sum = list['topicCount'] + list['knowledgeCount'] +
                    list['atlasCount'] + list['activityCount'] + list['voteCount'] + list['memberCount'];
                this.catalogList[1].sum = list['topicCount'];
                this.catalogList[2].sum = list['knowledgeCount'];
                this.catalogList[3].sum = list['atlasCount'];
                this.catalogList[4].sum = list['activityCount'];
                this.catalogList[5].sum = list['voteCount'];
                this.catalogList[6].sum = list['memberCount'];
            }
        },
        changeType(val) {
            this.pageNo = 1;
            this.type = val;
            this.getSearchContent('refresh');
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getSearchContent();
                this.isRefresh = false;
            }, 900);
        },
        onSearch() {
            this.pageNo = 1;
            this.getSearchContent('refresh');
        }
    }
};
</script>

<style scoped lang="less">
.content-container{
  padding-top: 56px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 56px);
  .catalog-container{
    height: 44px;
  }
  .list-container{
    flex: 1;
    height: 100px;
  }
}
</style>
